<template>
  <!-- 底部tab栏 -->
  <view class="tabbar_comp">
    <view class="tab_item" v-for="(item, index) in tabList" :key="index" @click="goTab(item)" :class="currentTab === index ? 'tab_item_active' : ''">
      <view class="logo_box">
        <image :src="currentTab === index ? item.srcActive : item.src" mode="widthFix" class="logo"></image>
      </view>
      <view class="label">{{ item.label }}</view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {
    currentTab: {
      // 当前选中下标
      type: Number,
      default: 0
    },
    list: {
      // 包含的标签列表
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tabJson: {
        index: {
          label: '首页',
          src: '/static/img/tab/index.svg',
          srcActive: '/static/img/tab/indexActive.svg',
          url: '/pages/index/index'
        },
        index1: {
          label: '首页',
          src: '/static/img/tab/index1.svg',
          srcActive: '/static/img/tab/index1Active.svg',
          url: '/pages/marketing/index/index'
        },
        news: {
          label: '要闻',
          src: '/static/img/tab/news.svg',
          srcActive: '/static/img/tab/newsActive.svg',
          url: '/pages/news/list/index'
        },
        auditing: {
          label: '审核',
          src: '/static/img/tab/auditing.svg',
          srcActive: '/static/img/tab/auditingActive.svg',
          url: '/pages/auditing/content-list/index'
        },
        user: {
          label: '我的',
          src: '/static/img/tab/user.svg',
          srcActive: '/static/img/tab/userActive.svg',
          url: '/pages/user/index/index'
        },
        clueInput: {
          label: '线索录入',
          src: '/static/img/tab/clueInput.svg',
          srcActive: '/static/img/tab/clueInputActive.svg',
          url: '/pages/marketing/clue-add/index'
        },
        clueManager: {
          label: '线索管理',
          src: '/static/img/tab/clueManager.svg',
          srcActive: '/static/img/tab/clueManagerActive.svg',
          url: '/pages/marketing/clue-list/index'
        }
      },
      tabList: []
    };
  },
  computed: {},
  created() {
    this.list.forEach(item => {
      this.tabList.push(this.tabJson[item]);
    });
  },
  methods: {
    goTab(item) {
      uni.navigateTo({
        url: item.url
      });
    }
  }
};
</script>

<style scoped lang="scss">
.tabbar_comp {
  position: fixed;
  bottom: 0;
  width: 750rpx;
  height: 100rpx;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #ffffff;
  box-shadow: 0rpx -6rpx 15rpx 0rpx rgba(182, 182, 182, 0.17);
  .tab_item {
    margin-top: 10rpx;
    display: inline-block;
    text-align: center;
    .logo_box{
      height: 46rpx;
      text-align: center;
      .logo {
        width: 46rpx;
      }
    }
    .label {
      margin-top: 2rpx;
      font-size: 20rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #C5C5C5;
      line-height: 28rpx;
    }
  }
  .tab_item_active{
    .label{
      font-size: 20rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 28rpx;
    }
  }
}
</style>
